import React, { useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import getStackBarChart from '@/utils/echarts_config/getStackBarChart';
import getDoughnut from '@/utils/echarts_config/getDoughnut';
import getNestedPies from '@/utils/echarts_config/getNestedPies';
import getRosPie from '@/utils/echarts_config/getRosPie';
import getMultipleGauge from '@/utils/echarts_config/getMultipleGauge';
import getBubbleChart from '@/utils/echarts_config/getBubbleChart';
import getRadarChart from '@/utils/echarts_config/getRadarChart';
import getFunnelChart from '@/utils/echarts_config/getFunnelChart';
import getWaterContent from '@/utils/echarts_config/getWaterContent';
import getAreaChart from '@/utils/echarts_config/getAreaChart';
import getStackLine from '@/utils/echarts_config/getStackLine';
import getBasicRelation from '@/utils/echarts_config/getBasicRelation';
import {
  getBarChart,
  getLineChart,
  getPieChart,
  getVisualMap,
  getGauge,
  getProgress6
} from '@/utils/echarts';
import {
  DOM_TYPE_BAR,
  DOM_TYPE_LINE,
  DOM_TYPE_PIE,
  DOM_TYPE_VIS,
  DOM_TYPE_GAUGE,
  DOM_TYPE_PRO6,
  DOM_TYPE_STACK_BAR,
  DOM_TYPE_DOUGHNUT,
  DOM_TYPE_NEST_PIE,
  DOM_TYPE_ROS_PIE,
  DOM_TYPE_MULTIPLE_GAUGE,
  DOM_TYPE_BUBBLE,
  DOM_TYPE_RADAR,
  DOM_TYPE_FUNNEL,
  DOM_TYPE_WATER_CONTENT,
  DOM_TYPE_AREA,
  DOM_TYPE_STACK_LINE,
  DOM_TYPE_BASCI_RELATION
} from '@/utils/const';
import { applySingleEchartsInfo } from '@/api/index';
import TypeProgress from '@/components/TypeProgress';
import _ from 'lodash';

const types = {
  [DOM_TYPE_BAR]: getBarChart,
  [DOM_TYPE_LINE]: getLineChart,
  [DOM_TYPE_PIE]: getPieChart,
  [DOM_TYPE_VIS]: getVisualMap,
  [DOM_TYPE_GAUGE]: getGauge,
  [DOM_TYPE_PRO6]: getProgress6,
  [DOM_TYPE_STACK_BAR]: getStackBarChart,
  [DOM_TYPE_DOUGHNUT]: getDoughnut,
  [DOM_TYPE_NEST_PIE]: getNestedPies,
  [DOM_TYPE_ROS_PIE]: getRosPie,
  [DOM_TYPE_MULTIPLE_GAUGE]: getMultipleGauge,
  [DOM_TYPE_BUBBLE]: getBubbleChart,
  [DOM_TYPE_RADAR]: getRadarChart,
  [DOM_TYPE_FUNNEL]: getFunnelChart,
  [DOM_TYPE_WATER_CONTENT]: getWaterContent,
  [DOM_TYPE_AREA]: getAreaChart,
  [DOM_TYPE_STACK_LINE]: getStackLine,
  [DOM_TYPE_BASCI_RELATION]: getBasicRelation
};

// eslint-disable-next-line complexity
const DragDom = ({
  data,
  index,
  optionList = [],
  formInfo,
  setFormInfo,
  isCs = true,
  isHome
}) => {
  let optionSet = [];
  optionSet = data.cdsOdbcValue ? JSON.parse(data.cdsOdbcValue) : [];
  const handleIsUpdate = (UpdateHz, id) => {
    if (UpdateHz && id) {
      setInterval(() => {
        applySingleEchartsInfo(id,1).then(res => {
          optionSet = res.data;
        });
      }, +UpdateHz * 1000);
    }
  };
  const option = types[data.cfiType || 3](optionSet);

  const component =
    data.cfiType === DOM_TYPE_PRO6 ? (
      <TypeProgress
        type={data.cfiType}
        data={optionList.length ? optionList : optionSet}
      />
    ) : (
      <ReactEcharts
        option={option}
        notMerge
        lazyUpdate
        style={{ width: '100%', height: '100%', paddingTop: '30px' }}
      />
    );
  useEffect(() => {
    !isCs && handleIsUpdate(data.cfiUpdateHz, data.cfiId || data.cfiConfigId);
  });
  return (
    <>
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/1.png')}
        alt=""
      />
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/1.png')}
        alt=""
      />
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/1.png')}
        alt=""
      />
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/1.png')}
        alt=""
      />
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/2.png')}
        alt=""
      />
      <img
        className="bg-icon"
        src={require('@/assets/images/temp/2.png')}
        alt=""
      />
      {/* <Icon type="close" style={{ position: 'absolute',right: 0, top: 0, color: '#fff', zIndex: '999' }} onClick={() => {
        let _idx;
        formInfo.map((e,i) => {
          if (JSON.parse(e.cfiLayout).i === index) {
            _idx = i;
          }
        });
        formInfo.splice(_idx,1);
        setFormInfo(_.clone(formInfo));
      }} /> */}
      <img
        className="bg-close"
        style={{ display: isHome ? 'none' : 'block' }}
        src={require('@/assets/images/temp/bg-close.png')}
        alt="close"
        onClick={e => {
          let _idx;
          formInfo.map((e, i) => {
            if (JSON.parse(e.cfiLayout).i === index) {
              _idx = i;
            }
          });
          formInfo.splice(_idx, 1);
          setFormInfo(_.clone(formInfo));
        }}
      />
      {data.cfiType === DOM_TYPE_GAUGE && (
        <img
          className="bg-eGauge"
          src={require('@/assets/images/temp/bg-img.png')}
          alt=""
        />
      )}
      <div className="title-box">{data.cfiName}</div>
      {
        <div>operate icon</div>
      }
      {component}
    </>
  );
};

export default DragDom;
